<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
			<el-form-item label="活动名称" prop="title">
				<el-input v-model="queryParams.title" placeholder="请输入活动名称" clearable @keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="活动介绍" prop="introduction">
				<el-input v-model="queryParams.introduction" placeholder="请输入活动介绍" clearable @keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="活动开始时间" prop="startTime">
				<el-date-picker clearable v-model="queryParams.startTime" type="date" value-format="yyyy/MM/dd" placeholder="请选择活动开始时间">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="活动结束时间" prop="endTime">
				<el-date-picker clearable v-model="queryParams.endTime" type="date" value-format="yyyy/MM/dd" placeholder="请选择活动结束时间">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['biz:activities:add']">新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['biz:activities:edit']">修改</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['biz:activities:remove']">删除</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['biz:activities:export']">导出</el-button>
			</el-col>
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table v-loading="loading" :data="activitiesList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="主键" align="center" prop="id" />
			<el-table-column label="活动名称" align="center" prop="title" />
			<el-table-column label="活动介绍" align="center" prop="introduction" />
			<el-table-column label="抽奖卷总数" align="center" prop="maxLotteryDrawNumb" />
			<el-table-column label="抽奖券剩余数量" align="center" prop="remainingRaffleTicketsNumber" />
			<el-table-column label="活动开始时间" align="center" prop="startTime" width="180">
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
				</template>
			</el-table-column>
			<el-table-column label="活动结束时间" align="center" prop="endTime" width="180">
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
				</template>
			</el-table-column>
			<el-table-column label="备注" align="center" prop="remark" />
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['biz:activities:edit']">修改</el-button>
					<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['biz:activities:remove']">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

		<!-- 添加或修改biz_抽奖活动对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="auto">
				<el-form-item label="活动名称" prop="title" required>
					<el-input v-model="form.title" placeholder="请输入活动名称" />
				</el-form-item>
				<el-form-item label="活动介绍" prop="introduction">
					<el-input v-model="form.introduction" placeholder="请输入活动介绍" />
				</el-form-item>
				<el-form-item label="抽奖券面值（元）" prop="lotteryCoupon" required>
					<el-input v-model="form.lotteryCoupon" type="number" placeholder="请输入抽奖券面值" />
				</el-form-item>
				<!-- <el-form-item label="可抽奖次数" prop="maxLotteryDrawNumb" required>
					<el-input v-model="form.maxLotteryDrawNumb" type="number" placeholder="请输入可抽奖次数" />
				</el-form-item> -->
				<el-form-item label="活动时间" prop="startTime">
					<!-- <el-date-picker clearable v-model="form.startTime" type="date" value-format="yyyy/MM/dd" placeholder="请选择活动开始时间">
					</el-date-picker> -->
					<el-date-picker v-model="form.startTime" style="width: 240px" value-format="yyyy/MM/dd HH:mm:ss" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"></el-date-picker>

				</el-form-item>
				<!-- <el-form-item label="活动结束时间" prop="endTime">
					<el-date-picker clearable v-model="form.endTime" type="date" value-format="yyyy/MM/dd " placeholder="请选择活动结束时间">
					</el-date-picker>
				</el-form-item> -->
				<el-card style="margin-bottom:20px">
					<h1>奖项信息 总张数：{{awardNumber||0}}公司利润(-5%运营成本)：{{amount||0}}%</h1>
					<el-table :data="form.prizeDTOS" style="width: 100%" border>
						<el-table-column prop="date" label="奖项名称">
							<template slot-scope="scope">
								<el-input v-model="scope.row.awardName" ref="nameInput" placeholder=""></el-input>
							</template>
						</el-table-column>
						<el-table-column prop="date" label="奖项数量">
							<template slot-scope="scope">
								<el-input v-model="scope.row.awardNumber" type="number" ref="nameInput" placeholder=""></el-input>
							</template>
						</el-table-column>
						<el-table-column prop="date" label="几等奖">
							<template slot-scope="scope">
								<el-input v-model="scope.row.sort" type="number" ref="nameInput" placeholder=""></el-input>
							</template>
						</el-table-column>

						<el-table-column prop="date" label="奖品类型">
							<template slot-scope="scope">
								<!-- 1.实物商品 2.积分 3.抽奖券 4.消费补贴金 5.现金 6.未中奖 -->
								<el-select v-model="scope.row.prizeType" filterable placeholder="请选择状态" clearable>
									<el-option label="实物商品" :value="1"></el-option>
									<el-option label="积分" :value="2"></el-option>
									<el-option label="抽奖券" :value="3"></el-option>
									<el-option label="消费补贴金" :value="4"></el-option>
									<el-option label="现金" :value="5"></el-option>
									<el-option label="未中奖" :value="6"></el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="date" label="中奖的奖品数量">
							<template slot-scope="scope">
								<el-input v-model="scope.row.number" type="number" ref="nameInput" placeholder=""></el-input>
							</template>
						</el-table-column>
						<!-- <el-table-column prop="date" label="奖品名称"  >
							<template slot-scope="scope">
								<el-input v-model="scope.row.prizeName" ref="nameInput" placeholder=""></el-input>
							</template>
						</el-table-column> -->
						<el-table-column prop="date" label="实物商品">
							<template slot-scope="scope" v-if="scope.row.prizeType == 1">
								<el-input v-model="scope.row.goodsId" type="number" ref="nameInput" placeholder=""></el-input>
							</template>
						</el-table-column>

						<el-table-column label="操作" width="80">
							<template slot-scope="scope">
								<el-popconfirm title="确定删除吗？" placement="top" @confirm="deleteprizeDTOS(scope.$index)">
									<el-button slot="reference" size="mini" type="danger">
										删除
									</el-button>
								</el-popconfirm>
							</template>
						</el-table-column>
					</el-table>
					<el-button type="primary" @click="addprizeDTOS">添加属性</el-button>
				</el-card>

				<el-form-item label="备注" prop="remark">
					<el-input v-model="form.remark" placeholder="请输入备注" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {
	listActivities,
	getActivities,
	delActivities,
	addActivities,
	updateActivities,
} from '@/api/biz/scratchCard';

export default {
	name: 'Activities',
	data() {
		return {
			awardNumber: 0, //奖券总张数
			dateRange: '',
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// biz_抽奖活动表格数据
			activitiesList: [],
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				title: null,
				introduction: null,
				customerRaffleTicket: null,
				startTime: null,
				endTime: null,
			},
			// 表单参数
			form: {
				prizeDTOS: [],
				lotteryCoupon: 5,
				// {"prizeDTOS":[{"awardName":"一等奖(黄金)","awardNumber":"1","sort":"1","prizeType":5,"number":"8888"},{"awardName":"二等奖(花西子化妆品)","awardNumber":"1","sort":"2","prizeType":5,"number":"888"},{"number":"88","prizeType":5,"sort":"3","awardNumber":"2","awardName":"三等奖(米家保温杯)"},{"number":"10","awardNumber":"20","sort":"4","prizeType":5,"awardName":"四等奖(小玩具)"},{"awardNumber":"10000","sort":"5","awardName":"五等奖(圆珠笔)","prizeType":5,"number":"8"},{"number":"6","awardNumber":"10000","awardName":"六等奖(精美零食)","sort":"6","prizeType":5},{"awardName":"七等奖(练字帖)","awardNumber":"10000","sort":"7","prizeType":5,"number":"5"},{"awardName":"八等奖","awardNumber":"200000","sort":"8","prizeType":2,"number":"2000"}],"lotteryCoupon":"5","title":"1","prizeInfo":"[{\"awardName\":\"一等奖(黄金)\",\"awardNumber\":\"1\",\"sort\":\"1\",\"prizeType\":5,\"number\":\"8888\"},{\"awardName\":\"二等奖(花西子化妆品)\",\"awardNumber\":\"1\",\"sort\":\"2\",\"prizeType\":5,\"number\":\"888\"},{\"number\":\"88\",\"prizeType\":5,\"sort\":\"3\",\"awardNumber\":\"2\",\"awardName\":\"三等奖(米家保温杯)\"},{\"number\":\"10\",\"awardNumber\":\"20\",\"sort\":\"4\",\"prizeType\":5,\"awardName\":\"四等奖(小玩具)\"},{\"awardNumber\":\"10000\",\"sort\":\"5\",\"awardName\":\"五等奖(圆珠笔)\",\"prizeType\":5,\"number\":\"8\"},{\"number\":\"6\",\"awardNumber\":\"10000\",\"awardName\":\"六等奖(精美零食)\",\"sort\":\"6\",\"prizeType\":5},{\"awardName\":\"七等奖(练字帖)\",\"awardNumber\":\"10000\",\"sort\":\"7\",\"prizeType\":5,\"number\":\"5\"},{\"awardName\":\"八等奖\",\"awardNumber\":\"200000\",\"sort\":\"8\",\"prizeType\":2,\"number\":\"2000\"}]","customerRaffleTicket":1,"maxLotteryDrawNumb":230024}
			},
			// 表单校验
			rules: {},
		};
	},
	computed: {
		amount() {
			var amount = '0.00';
			var num1 = 0; //奖池现金总数
			var awardNumber = 0; //抽奖总奖项数量
			var lotteryCoupon = this.form.lotteryCoupon; //抽奖券价格
			var prizeDTOS = this.form.prizeDTOS;
			prizeDTOS.forEach((item) => {
				awardNumber = Number(awardNumber) + Number(item.awardNumber);
				if (item.prizeType == 5) {
					num1 += item.number * item.awardNumber;
				}
			});
			var total = lotteryCoupon * awardNumber; //奖池总金额
			amount = (((total - num1) / total) * 100 - 5).toFixed(2); //（奖池总金额 - 现金池总额 ）/ 奖池总金额
			console.log('奖池总金额', total);
			console.log('奖池现金总数', num1);
			console.log('公司利润', amount);
			this.awardNumber = awardNumber;
			return amount;
		},
	},
	created() {
		this.getList();
	},
	methods: {
		deleteprizeDTOS(index) {
			this.form.prizeDTOS.splice(index, 1);
		},
		addprizeDTOS() {
			this.form.prizeDTOS.push({});
		},
		/** 查询biz_抽奖活动列表 */
		getList() {
			this.loading = true;
			listActivities(this.queryParams).then((response) => {
				this.activitiesList = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				lotteryCoupon: 5,
				prizeDTOS: [
					{
						awardName: '一等奖(黄金)',
						awardNumber: '1',
						sort: '1',
						prizeType: 5,
						number: '8888',
					},
					{
						awardName: '二等奖(雅诗兰黛小棕瓶)',
						awardNumber: '1',
						sort: '2',
						prizeType: 5,
						number: '888',
					},
					{
						number: '88',
						prizeType: 5,
						sort: '3',
						awardNumber: '2',
						awardName: '三等奖(米家保温杯)',
					},
					{
						number: '10',
						awardNumber: '20',
						sort: '4',
						prizeType: 5,
						awardName: '四等奖(小玩具)',
					},
					{
						awardNumber: '10000',
						sort: '5',
						awardName: '五等奖(圆珠笔)',
						prizeType: 5,
						number: '8',
					},
					{
						number: '6',
						awardNumber: '79976',
						awardName: '六等奖(精美零食)',
						sort: '6',
						prizeType: 5,
					},
					{
						awardName: '七等奖(练字帖)',
						awardNumber: '710000',
						sort: '7',
						prizeType: 5,
						number: '5',
					},
					{
						awardName: '八等奖',
						awardNumber: '200000',
						sort: '8',
						prizeType: 2,
						number: '2000',
					},
				],
			};
			this.resetForm('form');
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm('queryForm');
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.id);
			this.single = selection.length !== 1;
			this.multiple = !selection.length;
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = '添加biz_抽奖活动';
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset();
			const id = row.id || this.ids;
			getActivities(id).then((response) => {
				response.data.startTime = [
					response.data.startTime,
					response.data.endTime,
				];
				this.form = response.data;
				this.open = true;
				this.title = '修改biz_抽奖活动';
			});
		},
		/** 提交按钮 */
		submitForm() {
			var form = JSON.parse(JSON.stringify(this.form));
			if (form.startTime) {
				form.endTime = this.form.startTime[1];
				form.startTime = this.form.startTime[0];
			}
			form.prizeInfo = JSON.stringify(this.form.prizeDTOS);
			form.customerRaffleTicket = 1;
			var maxLotteryDrawNumb = 0;
			form.prizeDTOS.forEach((item) => {
				maxLotteryDrawNumb += Number(item.awardNumber);
			});
			form.maxLotteryDrawNumb = maxLotteryDrawNumb;
			this.$refs['form'].validate((valid) => {
				if (valid) {
					if (form.id != null) {
						updateActivities(form).then((response) => {
							this.$modal.msgSuccess('修改成功');
							this.open = false;
							this.getList();
						});
					} else {
						addActivities(form).then((response) => {
							this.$modal.msgSuccess('新增成功');
							this.open = false;
							this.getList();
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const ids = row.id || this.ids;
			this.$modal
				.confirm(
					'是否确认删除biz_抽奖活动编号为"' + ids + '"的数据项？'
				)
				.then(function () {
					return delActivities(ids);
				})
				.then(() => {
					this.getList();
					this.$modal.msgSuccess('删除成功');
				})
				.catch(() => {});
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download(
				'biz/activities/export',
				{
					...this.queryParams,
				},
				`activities_${new Date().getTime()}.xlsx`
			);
		},
	},
};
</script>
